<template>
<el-form :model="userform" label-width="80px" ref="userform" :rules="rules">
  <el-form-item label="用户id" prop="uid">
    <el-input v-model="userform.uid" placeholder="输入ID"></el-input>
  </el-form-item>
  <el-form-item label="用户姓名" prop="uname">
    <el-input v-model="userform.uname" placeholder="输入名称"></el-input>
  </el-form-item>
  <el-form-item label="用户性别" prop="sex">
    <el-input v-model="userform.sex" placeholder="输入1或2,1代表男,2代表女"></el-input>
  </el-form-item>
  <el-form-item label="出生日期">
    <el-date-picker v-model="userform.birth" type="datetime" placeholder="选择日期时间"style="width: 100%;"></el-date-picker>
  </el-form-item>
  <el-form-item label="用户权限" prop="keyid">
    <el-input v-model="userform.keyid" placeholder="输入0或1,0代表管理员,1代表用户"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">添加</el-button>
    <el-button @click="close">取消</el-button>
  </el-form-item>
</el-form>
</template>
<script setup>
import axios from 'axios';
import { inject, ref } from 'vue';
const show = inject('showaddvisible')
const tableData = inject('tableData')
const userform = ref({
  uid:'',
  uname:'',
  sex:'',
  birth:'',
  keyid:''
})
const rules = {
  uid:[
    {required:true, message: '请输入活动名称', trigger: 'blur' },
    {min:5,max:5, message:'用户id为5位数', trigger:'blur'}
  ],
  uname:[
    {required:true,message:'用户名称不能为空' ,trigger:'blur'}
  ],
  sex:[
    {pattern:/^[1-2]$/, message: '性别只能为1:男或2:女', trigger: 'blur' }
  ],
  keyid:[
    {required:true, message: '请输入用户权限', trigger: 'blur' },
    {pattern:/^[0-1]$/, message: '权限只能为0:管理员或1:用户', trigger: 'blur' }
  ]
}
const close = () => {
  show.value = false
}
function onSubmit(){
  userform.value.validate((valid)=>{
    if(valid){
      alert("adsa")
      console.log("cg");
    }else{
      console.log("ad");
      return false
    }
  })
  // const onSubmit = ()=>{
  //   axios.post("http://localhost:8088/user",{
  //     uid:userform.value.uid,
  //     uname:userform.value.uname,
  //     sex:userform.value.sex,
  //     birth:userform.value.birth,
  //     keyid:userform.value.keyid
  //   }).then(() =>{
  //     show.value = false
  //     axios.get("http://localhost:8088/user").then((response) =>{
  //       tableData.value = response.data
  //     })
  //   })
  // }
}
</script>
